<template>
	<div class="">
		<div id="calendar">
			<div class="month">
				<ul>
					<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
					<li class="year-month" @click="pickYear(currentYear,currentMonth)">
						<span class="choose-year">{{ currentYear }}年{{ currentMonth }}月</span>
						<!--<span class="choose-month"></span>-->
					</li>
					<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
				</ul>
			</div>
			<ul class="weekdays">
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>
				<li>日</li>
			</ul>
			<ul class="days">
				<li 
					:class="{select: formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate()) == day_date,choose: day_list.contains(formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate())) }" @click="pick(day)" v-for="day in days">
					<!--本月-->
					<div v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</div>
					<div v-else>
						<!--今天-->
						<div v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth()&& day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</div>
						<div v-else>{{ day.getDate() }}</div>
					</div>
				</li>
			</ul>
		</div>
		<!--事件列表-->
		<ul class="event-ul">
			<li class="event-li" v-if="isno">
				<div class="event-main">
					暂无事件
				</div>
			</li>
			<li class="event-li" v-for="list in event_list">
				<div class="event-main" @click="jump(list.id)">
					{{list.content}}
				</div>
			</li>
			
		</ul>
		<!--添加事件-->
		<img @click="addEvent()" class="add-event" src="../../assets/add.png" />
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		props: ['plan_id', 'step'],
		components: {
			BaseHeader,
		},
		data() {
			return {
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				days: [],
				day_list: [],
				uid: '',
				token: '',
				event_list: '',
				day_date: '',
				isno: false,
			}
		},
		created: function() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.initData(null);
		},
		mounted() {

		},
		methods: {
			initData: function(cur) {
				var date;
				if(cur) {
					date = new Date(cur);
				} else {
					date = new Date();
					var currentDay = date.getDate();
					var currentYear = date.getFullYear();
					var currentMonth = date.getMonth() + 1;
					var str = this.formatDate(currentYear, currentMonth, currentDay);
					this.getEventList(str);
					var d = new Date(this.formatDate(currentYear, currentMonth, 1));
					d.setDate(0);
					date = new Date(this.formatDate(currentYear, currentMonth, 1));
				}
				this.currentDay = date.getDate();
				this.currentYear = date.getFullYear();
				this.currentMonth = date.getMonth() + 1;
				this.currentWeek = date.getDay(); // 1...6,0
				if(this.currentWeek == 0) {
					this.currentWeek = 7;
				}
				var s = this.currentYear + '-' + this.currentMonth;
				this.getEventDay(s);
				var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
				console.log("today:" + str + "," + this.currentWeek);
				this.days.length = 0;
				// 今天是周日，放在第一行第7个位置，前面6个
				for(var i = this.currentWeek - 1; i >= 0; i--) {
					var d = new Date(str);
					d.setDate(d.getDate() - i);
					console.log("y:" + d.getDate());
					this.days.push(d);
				}
				for(var i = 1; i <= 35 - this.currentWeek; i++) {
					var d = new Date(str);
					d.setDate(d.getDate() + i);
					this.days.push(d);
				}
			},
			pick: function(date) {
				this.day_date = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
				//alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
				this.getEventList(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
			},
			pickPre: function(year, month) {
				// setDate(0); 上月最后一天
				// setDate(-1); 上月倒数第二天
				// setDate(dx) 参数dx为 上月最后一天的前后dx天
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(0);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickNext: function(year, month) {
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(35);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickYear: function(year, month) {
				//				alert(year + "," + month);
			},

			// 返回 类似 2016-01-02 格式的字符串
			formatDate: function(year, month, day) {
				var y = year;
				var m = month;
				if(m < 10) m = "0" + m;
				var d = day;
				if(d < 10) d = "0" + d;
				return y + "-" + m + "-" + d
			},
			//添加事件
			addEvent() {
				this.$router.push({
					name: 'AddEvent',
					params: {
						pid: this.plan_id
					}
				});
			},
			//
			jump(id) {
				this.$router.push({
					name: 'EventDetails',
					params: {
						eid: id
					}
				});
			},
			//获取某月哪些日子有事件
			getEventDay(s) {
				var self = this;
				var data = {
					month: s,
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.braces_event_month, data, function(msg) {
					if(msg.error == 0) {
						self.day_list = msg.data;
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//获取某日的事件列表
			getEventList(day) {
				var self = this;
				var data = {
					day: day,
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.braces_event_day, data, function(msg) {
					if(msg.error == 0) {
						self.event_list = msg.data;
						if (msg.data.length>0) {
							self.isno = false;
						} else{
							self.isno = true;
						}
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
	@import "../../style/calendar.css";
</style>